<template>
    <div class="loginBox">
        登录组件---------- {{ $store.state.count }}

        <span> 你好</span>

        <ul>
            <li><a href="">哈哈</a></li>
        </ul>
    </div>

    <button @click="handlerclick">点击触发 count</button>

    <button @click="asnycHandlerclick">异步点击触发 count</button>

    <el-row class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </el-row>

    <el-form :model="form" label-width="120px">
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import { useStore } from 'vuex'

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}




const store = useStore()


// 同步验证vuex
const handlerclick = () => {
    store.commit('addCount')
}


// 异步验证vuex
const asnycHandlerclick = () => {
    store.dispatch(
        'asyncAddCount  '
    )
}
</script>

<style lang="scss" scoped>
$color:#00c;
.loginBox {
    span {
        color: $color
    }

    ul {
        li {
            color: $color;
            a {
                background-color: orange;
            }
        }

    }

}
</style>